<template>
  <div class="grade-container">
    <!-- 成绩列表区域 -->
    <div
      class="score-box-list content-box"
      v-if="scoreList && scoreList.length > 0"
    >
      <!-- 单个成绩卡片 -->
      <div class="score-box" v-for="item in scoreList" :key="item.id">
        <h3 class="content-box-item-title no-scrollbar">
          {{ item["score"]["course_title"] }}
        </h3>
        <!-- 横向可滚动成绩列表 -->
        <div class="scores-list no-scrollbar scroll-x">
          <template
            v-for="(value, key, index) of filterScoreItem(item['score'])"
            :key="index"
          >
            <!-- 成绩项（包含不同状态：无成绩/及格/不及格） -->
            <div
              v-if="getScoreClass(value) !== 'none'"
              class="score-item"
              :class="getScoreClass(value)"
            >
              <div class="score" v-if="getScoreClass(value) == 'pass'">
                {{ $t("tag.pass") }}
              </div>
              <div class="score" v-if="getScoreClass(value) == 'flunk'">
                {{ $t("tag.fail") }}
              </div>
              <div class="text">{{ key }}</div>
            </div>
          </template>
        </div>
        <!-- 横向可滚动文件列表 -->
        <template v-if="item['material'] && item['material'].length > 0">
          <div class="no-scrollbar scroll-x">
            <div class="file-list">
              <template
                v-for="(fileItem, index) in item['material']"
                :key="index"
              >
                <div class="file-item">
                  <span>{{
                    fileItem["pm_name"] || getFileNameFromUrl(fileItem["file"])
                  }}</span>
                  <IconDownload2
                    @click="downloadFile(fileItem['file'])"
                    class="svg-icon"
                  />
                </div>
              </template>
            </div>
          </div>
        </template>
      </div>
    </div>

    <!-- 加载骨架屏 -->
    <div class="score-box-list content-box" v-if="!scoreList">
      <div class="score-box" v-for="i in 2" :key="i">
        <div class="content-box-item-title">
          <div class="pc-skeleton">
            <Skeleton width="200" pc />
          </div>
          <div class="mobile-skeleton">
            <Skeleton width="500" mobile />
          </div>
        </div>
        <div class="scores-list no-scrollbar" style="overflow: hidden">
          <template v-for="i in 22" :key="i">
            <div class="score-item">
              <div class="score" style="background: none">
                <Skeleton width="100%" height="100%" fill round />
              </div>
              <div class="text" style="margin-top: 2px">
                <div class="pc-skeleton">
                  <Skeleton width="60" pc />
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- 无数据状态 -->
    <NoData v-if="scoreList && scoreList.length == 0" />
  </div>
</template>

<script setup lang="ts">
// 引入必要的库和API
import { computed, onBeforeMount, ref } from "vue";
import { postPersonalScoreList } from "../../../api/aviation";

// 定义成绩列表的响应式变量
const scoreList = ref();

// 获取个人成绩列表数据的异步函数
const getScoreListData = async () => {
  let res = await postPersonalScoreList();
  scoreList.value = res.data || [];
};

// 获取文件名称
function getFileNameFromUrl(url: string) {
  // 创建一个 URL 对象
  const urlObj = new URL(url);

  // 获取路径部分（pathname）
  const pathname = urlObj.pathname;

  // 使用正则表达式提取文件名
  const fileName = pathname.split("/").pop();

  return fileName;
}

// 过滤成绩对象中不需要的属性
const filterScoreItem = computed(() => {
  return (obj: Object) => {
    const {
      course_cn_title,
      course_en_title,
      course_id,
      course_title,
      member_id,
      type,
      id,
      ...newObj
    } = obj;
    return newObj;
  };
});

// 根据成绩值返回相应的CSS类
const getScoreClass = (value) => {
  if (isNaN(parseInt(value)) || parseInt(value) < 0) {
    return "none"; // 无成绩状态
  } else if (value >= 75) {
    return "pass"; // 及格状态
  } else {
    return "flunk"; // 不及格状态
  }
};

// 页面加载前获取成绩数据
onBeforeMount(() => {
  getScoreListData();
});
</script>

<style scoped lang="less">
@import url("./common.less");
/* 成绩卡片列表样式 */
.score-box-list {
  display: flex;
  flex-direction: column;
  gap: 32px; /* 间距 */
  margin-top: 0;

  .score-box {
    background: #fff; /* 背景颜色 */
    border-radius: 16px; /* 圆角 */
    padding: 24px; /* 内边距 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    transition: all 0.3s ease; /* 过渡效果 */

    &:hover {
      transform: translateY(-2px); /* 悬浮效果 */
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 悬浮阴影 */
    }
  }

  .content-box-item-title {
    font-size: 20px; /* 字体大小 */
    font-weight: 600; /* 字体粗细 */
    margin-bottom: 24px; /* 下边距 */
    color: var(--text-primary, #333); /* 文字颜色 */
    padding-bottom: 12px; /* 下内边距 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 分隔线 */
  }
}

/* 成绩列表横向滚动容器 */
.scores-list {
  display: flex; /* 横向排列 */
  gap: 24px; /* 间距 */
  padding: 8px 4px; /* 内边距 */
  flex-wrap: wrap;
  &.scroll-x {
    overflow-x: auto; /* 横向滚动 */
    scrollbar-width: none; /* 隐藏滚动条 */
    -ms-overflow-style: none; /* 隐藏滚动条 */
    &::-webkit-scrollbar {
      display: none; /* 隐藏滚动条 */
    }
  }
}

/* 成绩项样式 */
.score-item {
  min-width: 100px; /* 最小宽度 */
  padding: 16px; /* 内边距 */
  border-radius: 12px; /* 圆角 */
  transition: all 0.3s ease; /* 过渡效果 */
  text-align: center; /* 文字居中 */

  .score {
    font-size: 24px; /* 字体大小 */
    font-weight: 600; /* 字体粗细 */
    margin-bottom: 8px; /* 下边距 */
  }

  .text {
    font-size: 14px; /* 字体大小 */
    color: var(--text-secondary, #666); /* 文字颜色 */
    white-space: nowrap; /* 不换行 */
  }

  /* 无成绩状态 */
  &.none {
    opacity: 0.5; /* 透明度 */
    background-color: var(--disabled-bg, #f5f5f5); /* 背景颜色 */
  }

  /* 及格状态 */
  &.pass {
    background-color: var(--success-bg, #e8f5e9); /* 背景颜色 */
    .score {
      color: var(--success, #4caf50); /* 文字颜色 */
    }
  }

  /* 不及格状态 */
  &.flunk {
    background-color: var(--error-bg, #ffebee); /* 背景颜色 */
    .score {
      color: var(--error, #f44336); /* 文字颜色 */
    }
  }

  &:hover {
    transform: scale(1.02); /* 悬浮放大效果 */
  }
}

.file-list {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  gap: 15px;
  font-size: 16px;
  background-color: #f9f9f9; /* 背景颜色 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.file-item {
  display: flex;
  align-items: center;
  padding: 8px 12px; /* 内边距 */
  background-color: #ffffff; /* 文件项背景颜色 */
  border-radius: 4px; /* 文件项圆角 */
  transition: all 0.2s; /* 动画效果 */
  span {
    word-break: break-all;
  }
}

.file-item:hover {
  transform: scale(1.03); /* 悬停时放大效果 */
}

.svg-icon {
  margin-left: 8px; /* 图标与文本之间的间距 */
  fill: #007bff; /* 图标颜色 */
}

/* 响应式样式 */
@media screen and (max-width: 768px) {
  .grade-container {
    padding: 16px; /* 内边距 */
  }

  .score-box-list {
    gap: 123px; /* 间距 */
    .score-box {
      padding: 20px; /* 内边距 */
      border-radius: 12px; /* 圆角 */
      box-shadow: none !important;
      &:hover {
        transform: translateY(0);
      }
    }

    .content-box-item-title {
      font-size: 82px; /* 字体大小 */
      margin-bottom: 40px; /* 下边距 */
      padding-bottom: 40px;
      overflow-x: scroll;
    }
  }
  .scores-list {
    flex-wrap: nowrap;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 80px !important;
  }
  .score-item {
    min-width: auto; /* 最小宽度 */
    padding: 60px; /* 内边距 */
    flex-shrink: 0;
    border-radius: 40px;
    .score {
      font-size: 20px; /* 字体大小 */
    }
    .text {
      font-size: 64px; /* 字体大小 */
    }
  }

  .file-list {
    margin-top: 80px;
    padding: 80px 60px;
    font-size: 72px;
    min-width: 200%;
    gap: 60px;
    .file-item {
      padding: 42px;
      border-radius: 20px;
      .svg-icon {
        margin-left: 40px;
      }
    }
  }
}
</style>
